<template>
  <div class="conversation-tools">
    <!-- tab切换 -->
    <div class="tools-title"  @click="fastactive = !fastactive">
      <span>快捷语</span
      ><i :class="[fastactive ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"
      ></i>
    </div>
    <!-- tab 显示 -->
    <div class="tools-content" style="flex: none;height:200px;" v-show="fastactive">
      <fast-reply style="height: 300px" ></fast-reply>
    </div>
    <div style="flex:1;display:flex;overflow-x:hidden;overflow-y: auto;flex-direction: column;" class="scroll">
      <div class="tools-title" style="margin-top: 10px"   @click="daibanctive = !daibanctive">
        <span>任务处理</span>
        <i :class="[daibanctive ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"
        ></i>
      </div>
      <div class="tools-content" v-show="daibanctive" style="flex:1;height:100%">
        <todo :currentFriend="currentFriend"></todo>
      </div>
    </div>
  
    <div class="tools-bottom"></div>
  </div>
</template>

<script>
import FastReply from "./record/FastReply";
import { mapGetters, mapActions } from "vuex";
import todo from './record/todo'
import { MessageBox } from "element-ui";
export default {
  data() {
    return {
      baseform: {
        taskId: "",
        tradingVolume: 0,
        buyerNick: "", //
        orderNo: "", //
        tradingType: "",
        orderType: "", //
        rebatesType: "",
        buyerType: "", //
        rebatesChannel: "",
        rebatesWay: "",
        rebatesAmount: "",
        status: "",
        responsibleUserId: "",
      },
      // 快捷语收缩
      fastactive: true,
      // 待办收缩
      daibanctive: true,
    };
  },
  created() {
    if (this.toduList.length === 0) {
      this.$store.dispatch("websocket/GetTodoList");
    }
    if (this.dictlist.length === 0) {
      this.$store.dispatch("websocket/GetAllDictList");
    }
    this.$store.dispatch("websocket/GetAllDictList");
  },
  components: {
    FastReply,todo
  },
  computed: {
    ...mapGetters({
      toduList: "conversation/toduList",
      daskDetail: "conversation/daskDetail",
      dictlist: "conversation/dictlist",
      isinput: "conversation/isinput",
      inputform: "conversation/inputform",
      currentFriends: 'conversation/currentFriends',
      currentWeChatId: 'conversation/currentWeChatId',
    }),
        // 当前选中的好友
    currentFriend() {
      return this.currentFriends[this.currentWeChatId] || {}
    },
    form() {
      return Object.assign(this.baseform, this.inputform);
    },
    tradingTypeOptions() {
      return this.dictlist.trading_type;
    },
    orderTypeOptions() {
      return this.dictlist.order_type;
    },
    rebatesTypeOptions() {
      return this.dictlist.rebates_type;
    },
    buyerTypeOptions() {
      return this.dictlist.user_type;
    },
    rebatesChannelOptions() {
      return this.dictlist.channel_type;
    },
    statusOptions() {
      return this.dictlist.risk_detail_status;
    },
  },
  methods: {
    // 返回列表
    backlist() {
      this.$store.commit("conversation/SET_ISINPUT", false);
      this.$store.commit("conversation/SET_INPUTFORM", {});
      this.baseform = {
        taskId: "",
        tradingVolume: 0,
        buyerNick: "", //
        orderNo: "", //
        tradingType: "",
        orderType: "", //
        rebatesType: "",
        buyerType: "", //
        rebatesChannel: "",
        rebatesWay: "",
        rebatesAmount: "",
        status: "",
        responsibleUserId: "",
      };
    },
    // 保存
    saveForm() {
      // return
      this.$store.dispatch("websocket/SaveTaskDatil", this.form);
    },
    inputtask(id) {
      this.$store.dispatch("websocket/GetTodoDetail", { id });
    },
    // 点击已完成按钮
    checkend(id) {
      this.$store.dispatch("websocket/CloseTodo", { id });
    },
    // 刷新数据
    fresh(currentTab) {
      //   switch (currentTab) {
      //     case 'FastReply':
      //       // 刷新公共术语
      //       this.$store.dispatch('websocket/GetCommonTerms')
      //       break
      //     case 'FriendCircle':
      //       this.getFriendCircle()
      //       break
      //     case 'ChatRoomManager':
      //       this.showMoreMembers()
      //       break
      //     default:
      //       break
      //   }
    },
    // 清除数据库
    clearNedb(currentTab) {
      //   let wechatId = this.currentFriend.WeChatId
      //   let userId = this.userId
      //   switch (currentTab) {
      //     case 'FastReply':
      //       this.$nedb.myReply.remove({}, { multi: true }, (err, count) => {
      //         this.SetMyReply()
      //       })
      //       break
      //     case 'FriendCircle':
      //       this.$nedb.circles.remove(
      //         { userId: userId, WeChatId: this.currentFriend.FriendId, Owner: wechatId },
      //         { multi: true },
      //         (err, count) => {
      //           this.SetFriendCircles(this.currentFriend.FriendId)
      //         })
      //       break
      //     case 'LabelRemark':
      //       this.$nedb.labels.remove({ userId: userId, WeChatId: wechatId },
      //         { multi: true },
      //         (err, count) => {
      //           this.$store.dispatch('SetLabels')
      //         })
      //       break
      //     default:
      //       break
      //   }
    },
    //发送消息
    sendMsg(item) {
      if (item.picture) {
        let content = item.picture;
        this.$store.commit("conversation/SET_CONTENT", content);
      }
      return;
    },
  },
};
</script>

<style lang="scss" scoped>
.conversation-tools {
  width: 300px;
  min-width: 300px;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .base-box {
    flex: 1;
  }
  .tools-title,
  .tools-bottom {
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
    // background-color: #545c64;
    background-color: $bg-color-nav-title-2;
  }
  .tools-title {
    cursor: pointer;
    span {
      flex: 1;
      text-align: center;
    }
    i {
      width: 40px;
      text-align: center;
    }
    .tab {
      width: 90px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      &:hover {
        background-color: #434a50;
      }
    }
    .tab-chose {
      color: #ffd04b;
      border-bottom: #ffd04b solid 2px;
    }
  }
  .tools-bottom {
    .el-tooltip {
      width: 40px;
      color: white;
    }
  }

  .tools-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #f4f4f5;
    background-color: $bg-color-content-base;
  }
}
.reply-nav {
  width: 100%;
  margin: 5px;
  .el-radio-button {
    width: 50%;
    ::v-deep .el-radio-button__inner {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0;
    }
  }
}
.task-list-ul {
  .flex-box {
    display: flex;
    span {
      flex: 1;
    }
  }
  padding: 5px;
  li {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
    div {
      line-height: 25px;
    }
    span {
      // flex: 1;
      display: flex;
    }
    button {
      padding: 5px 10px;
      font-size: 12px;
    }
  }
}
.form-footer {
  text-align: center;
}
</style>
